<template>
  <div class="churn-report">
    <!-- 流失统计 -->
    <el-row :gutter="20" class="stat-cards">
      <el-col :span="6">
        <div class="stat-card high-risk">
          <div class="stat-label">高风险会员</div>
          <div class="stat-value">{{ highRiskCount }}</div>
          <div class="stat-desc">30天+未消费</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card medium-risk">
          <div class="stat-label">中风险会员</div>
          <div class="stat-value">{{ mediumRiskCount }}</div>
          <div class="stat-desc">15-30天未消费</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card low-risk">
          <div class="stat-label">低风险会员</div>
          <div class="stat-value">{{ lowRiskCount }}</div>
          <div class="stat-desc">7-15天未消费</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card churn-rate">
          <div class="stat-label">流失率</div>
          <div class="stat-value">{{ churnRate }}%</div>
          <div class="stat-desc">较上月</div>
        </div>
      </el-col>
    </el-row>

    <!-- 流失趋势 -->
    <el-card style="margin-top: 20px;">
      <template #header>
        <span>⚠️ 流失趋势分析</span>
      </template>
      <div class="chart-container" ref="churnTrendChart"></div>
    </el-card>

    <!-- 流失原因和等级分布 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>📊 流失原因分析</span>
          </template>
          <div class="chart-container" ref="churnReasonChart"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>📈 等级流失分布</span>
          </template>
          <div class="chart-container" ref="levelChurnChart"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 流失会员明细 -->
    <el-card style="margin-top: 20px;">
      <template #header>
        <span>📋 流失会员明细</span>
      </template>
      <el-table :data="churnData" border stripe>
        <el-table-column prop="memberName" label="会员姓名" width="120" />
        <el-table-column prop="phone" label="手机号" width="130" />
        <el-table-column prop="level" label="等级" width="100" />
        <el-table-column prop="daysSinceLastVisit" label="未消费天数" width="120">
          <template #default="{ row }">
            <el-tag :type="getRiskTag(row.daysSinceLastVisit)">
              {{ row.daysSinceLastVisit }}天
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="totalConsumption" label="累计消费" width="120">
          <template #default="{ row }">
            ¥{{ row.totalConsumption.toLocaleString() }}
          </template>
        </el-table-column>
        <el-table-column prop="churnScore" label="流失评分" width="100">
          <template #default="{ row }">
            <span :style="{ color: getScoreColor(row.churnScore) }">
              {{ row.churnScore }}%
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="churnReason" label="流失原因" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  dateRange: { type: Array, default: () => [] }
})

const highRiskCount = ref(1567)
const mediumRiskCount = ref(2345)
const lowRiskCount = ref(5678)
const churnRate = ref(12.3)

const churnData = ref([
  { memberName: '刘一', phone: '13700137001', level: '金卡会员', daysSinceLastVisit: 45, totalConsumption: 25678, churnScore: 85, churnReason: '价格敏感' },
  { memberName: '陈二', phone: '13700137002', level: '银卡会员', daysSinceLastVisit: 38, totalConsumption: 15234, churnScore: 78, churnReason: '服务不满' }
])

const churnTrendChart = ref(null)
const churnReasonChart = ref(null)
const levelChurnChart = ref(null)

onMounted(() => {
  initChurnTrendChart()
  initChurnReasonChart()
  initLevelChurnChart()
})

const initChurnTrendChart = () => {
  const chart = echarts.init(churnTrendChart.value)
  chart.setOption({
    tooltip: { trigger: 'axis' },
    legend: { data: ['高风险', '中风险', '低风险', '流失率'] },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
    },
    yAxis: [
      { type: 'value', name: '人数' },
      { type: 'value', name: '流失率(%)' }
    ],
    series: [
      {
        name: '高风险',
        type: 'bar',
        stack: 'risk',
        data: [1234, 1345, 1456, 1389, 1498, 1567, 1678],
        itemStyle: { color: '#f56c6c' }
      },
      {
        name: '中风险',
        type: 'bar',
        stack: 'risk',
        data: [2123, 2234, 2345, 2178, 2398, 2456, 2567],
        itemStyle: { color: '#e6a23c' }
      },
      {
        name: '低风险',
        type: 'bar',
        stack: 'risk',
        data: [5234, 5345, 5456, 5289, 5598, 5678, 5789],
        itemStyle: { color: '#409eff' }
      },
      {
        name: '流失率',
        type: 'line',
        yAxisIndex: 1,
        data: [11.2, 11.8, 12.1, 11.5, 12.3, 12.5, 12.8],
        itemStyle: { color: '#909399' }
      }
    ]
  })
}

const initChurnReasonChart = () => {
  const chart = echarts.init(churnReasonChart.value)
  chart.setOption({
    tooltip: { trigger: 'item' },
    series: [
      {
        name: '流失原因',
        type: 'pie',
        radius: '60%',
        data: [
          { value: 3456, name: '价格敏感' },
          { value: 2345, name: '服务不满' },
          { value: 1876, name: '竞品吸引' },
          { value: 1234, name: '商品质量' },
          { value: 987, name: '其他原因' }
        ]
      }
    ]
  })
}

const initLevelChurnChart = () => {
  const chart = echarts.init(levelChurnChart.value)
  chart.setOption({
    tooltip: { trigger: 'axis' },
    legend: { data: ['普通会员', '银卡会员', '金卡会员', '钻石会员'] },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
    },
    yAxis: { type: 'value' },
    series: [
      {
        name: '普通会员',
        type: 'line',
        data: [567, 623, 678, 645, 712, 756, 789]
      },
      {
        name: '银卡会员',
        type: 'line',
        data: [234, 267, 289, 278, 298, 312, 334]
      },
      {
        name: '金卡会员',
        type: 'line',
        data: [123, 145, 156, 149, 167, 178, 189]
      },
      {
        name: '钻石会员',
        type: 'line',
        data: [23, 34, 39, 36, 45, 48, 52]
      }
    ]
  })
}

const getRiskTag = (days) => {
  if (days >= 30) return 'danger'
  if (days >= 15) return 'warning'
  return 'info'
}

const getScoreColor = (score) => {
  if (score >= 70) return '#f56c6c'
  if (score >= 40) return '#e6a23c'
  return '#67c23a'
}
</script>

<style scoped>
.churn-report {
  padding: 20px 0;
}

.stat-cards {
  margin-bottom: 20px;
}

.stat-card {
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  color: white;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.stat-card.high-risk {
  background: linear-gradient(135deg, #f56c6c 0%, #ff4757 100%);
}

.stat-card.medium-risk {
  background: linear-gradient(135deg, #e6a23c 0%, #ffa502 100%);
}

.stat-card.low-risk {
  background: linear-gradient(135deg, #409eff 0%, #5f27cd 100%);
}

.stat-card.churn-rate {
  background: linear-gradient(135deg, #909399 0%, #57606f 100%);
}

.stat-label {
  font-size: 16px;
  opacity: 0.9;
  margin-bottom: 15px;
}

.stat-value {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 10px;
}

.stat-desc {
  font-size: 14px;
  opacity: 0.8;
}

.chart-container {
  height: 400px;
}
</style>

